<template>
  <div class="common-layout">
    <el-container>
      <el-header class="my-header">
        <TopHeader></TopHeader>
      </el-header>
      <el-main class="my-main">
        <router-view v-slot="{ Component }">
          <keep-alive include="TravelMap">
            <component :is="Component" />
          </keep-alive>
        </router-view>
      </el-main>
      <el-footer class="my-footer">
        <MyFooter></MyFooter>
      </el-footer>
      <el-backtop :right="50" :bottom="100">
        <el-icon>
          <Top />
        </el-icon>
      </el-backtop>
    </el-container>
  </div>
</template>
<script setup lang="ts">
import MyFooter from '@/components/MyFooter.vue'
import TopHeader from '@/components/TopHeader.vue'
import { useCurrentUserStore } from '@/stores/useCurrentUserStore.ts'
import { onBeforeMount } from 'vue'

const currentUserStore = useCurrentUserStore()

onBeforeMount(async ()=>{
  await currentUserStore.checkAnyStoreUser()
})

console.log('本地化登录的结果')
console.log(currentUserStore.loginUser)
</script>

<style scoped>
.common-layout {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 100vh;
  /* background-color: black; */
  overflow-x: hidden;
  overflow-y: hidden;
}

.common-layout .my-header {
  width: 100%;
  height: 70px;
  padding: 0px;
}

.common-layout .my-main {
  margin: 0 auto;
  padding: 0px;
  width: 100%;
  /* margin: 0px auto; */
  text-align: center;
  min-height: 100vh;
  background-color: #f6f6f6;
  overflow-x: hidden;
}

.common-layout .my-footer {
  width: 100%;
  padding: 0px;
  height: 100px;
}
</style>
